<script>
// 协作者模态表单页
Vue.component('binduser-form', {
    template: `
<el-dialog :visible.sync="dialogShow" width="600px" @close="closeModal">
    <h3 slot="title">添加协作者</h3>
    <el-form ref="form" :rules="bindUserRules" :model="bindUserForm" label-width="80px">
        <el-form-item label="角色身份" required>
        <el-radio v-model="bindUserForm.role" label="manager">管理员</el-radio>
        <el-radio v-model="bindUserForm.role" label="accountant">会计</el-radio>
        <el-radio v-model="bindUserForm.role" label="cashier">出纳</el-radio>
        <el-radio v-model="bindUserForm.role" label="viewer">老板/股东</el-radio>
        <el-radio v-model="bindUserForm.role" label="pmanger">项目经理</el-radio>
        <p>
           <el-alert v-if="bindUserForm.role == 'manager'"
            :closable="false" class="nopad"
            title="管理员具有全部操作权限，权限仅次于创建者"
            type="info">
           </el-alert>
            <el-alert v-if="bindUserForm.role == 'accountant'"
            :closable="false" class="nopad"
            title="会计具有录入账单权限，无审核权限"
            type="info">
           </el-alert>
            <el-alert v-if="bindUserForm.role == 'cashier'"
            :closable="false" class="nopad"
            title="出纳具有审核权限，审核账单, 添加出纳后账本将自动调整为审核模式"
            type="info">
           </el-alert>
            <el-alert v-if="bindUserForm.role == 'viewer'"
            :closable="false" class="nopad"
            title="老板/股东只有查看权限，不具有增加账单、审核等权限"
            type="info">
           </el-alert>
        </p>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" required>
        <el-input autocomplete="off" v-model="bindUserForm.phone"></el-input>
        </el-form-item>





    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="handleBindUserForm">确 定</el-button>
    </div>
</el-dialog>
    `,
    props: ['dialog-show','form-row'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },
        projectList() {
            return this.$store.state.projectList
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {
                this.bindUserForm = newVal
            },
            deep:true
        }
    },
    data:function() {
        return {
            bindUserForm:{role:'accountant'},
            bindUserRules:{
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        closeModal() {
            this.$emit('modalClose')
        },
        handleBindUserForm(){
            let that = this
            let postUrl = '/api/tally/bind-role'
            axios.post(postUrl,{
                id:that.currentTallyId,
                phone:that.bindUserForm.phone,
                role:that.bindUserForm.role
            },{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.$message({
                        type: 'success',
                        message: '操作成功~'
                    })
                    that.$emit('getTallyUsersList')
                    that.$emit('modalClose')
                }else{
                    that.$message({
                        type: 'error',
                        message: res.data.error_message
                    })
                }
            })
        },
    }
})
</script>
